<template>
  <view class="root">
    <acme-app-bar title="Overlay"></acme-app-bar>
    
    <view class="ui-title">基础用法</view>
    <acme-cell-group :radius="10" width="95%">
      <acme-cell title="基础用法" link @click="openOverlay"/>
    </acme-cell-group>

    <acme-popup v-model="showOverlay" :styles="{width: '0', height: '0'}"/>
  </view>
</template>

<script>
  import AcmeCellGroup from "@/components/acme-design/cell-group"
  import AcmeCell from "@/components/acme-design/cell"
  
  export default {
    components: {
      AcmeCellGroup,
      AcmeCell,
    },
    data() {
      return {
        showOverlay: false,
      };
    },
    methods: {
      openOverlay(position) {
        this.showOverlay = true
      },
    },
  };
</script>


<style lang="scss" scoped>
  .root {
    min-height: 100vh;
    background: #f7f8fa;
    overflow: hidden;
  }
</style>